<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.1</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/cookie.js"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/lay/modules/jquery.js" type="text/javascript"
	charset="utf-8"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-row">
			<form class="layui-form layui-col-md6 x-so" onsubmit="return false" >
				<input class="layui-input" autocomplete="off" placeholder="开始日"
					name="start" id="start"> <input class="layui-input"
					autocomplete="off" placeholder="截止日" name="end" id="end"> <input
					type="text" name="username" placeholder="请输入用户名" autocomplete="off"
					class="layui-input">
				<button class="layui-btn" id="search">
					<i class="layui-icon">&#xe615;</i>
				</button>
			</form>

			<form class="layui-form layui-col-md6 x-so"
				enctype="multipart/form-data" method="post" action="/X-admin/EStu">
				文件 <input type="file" name="file" /> <input type="submit"
					value="上传" />
			</form>
		</div>
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon"></i>批量删除
		</button>
		<button class="layui-btn" id="jia">
			<i class="layui-icon"></i>添加
		</button>

		</xblock>
		<table class="layui-table" id="tab" lay-filter="tfil"></table>


	</div>


	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

	<script>
		layui
				.use(
						[ 'table', 'form', 'laydate', 'tree' ],
						function() {
							var table = layui.table, form = layui.form, $ = layui.$, tree = layui.tree, laydate = layui.laydate;

							laydate.render({
								elem : '#addTime',
								type : 'year',
								width : 500
							});

							table
									.render({
										elem : '#tab',
										url : 'find',
										method : 'Get',
										page : true,
										toolbar : '#top',
										cols : [ [
												{
													field : 'id',
													title : 'ID'
												},
												{
													field : 'cardno',
													title : '卡号'
												},
												{
													title : '身份编号',
													templet : '<div id="l">{{d.memberships.department}}</div>'
												}, {
													field : 'name',
													title : '姓名'
												}, {
													field : 'sex',
													title : '性别'
												}, {
													field : 'status',
													title : '状态'
												}, {
													field : 'stuno',
													title : '待定'
												}, {
													title : '操作工具栏',
													toolbar : '#barDemo',
													width : 400
												}

										] ],
										id : 'ttt'
									});

							/* $(function(){
								$.post('getType',{},function(data){
									var h='';
									for (var i = 0; i < data.length; i++) {
										h+='<option value="'+data[i].tid+'">'+data[i].tname+'</option>';
									}
								
									$("select").append(h);
									form.render('select');
								})
							}) */

							active = {
								reload : function() {

									table.reload('ttt', {
										//	alert($("#start").val());
										where : {
											'name' : $("#start").val(),
											

										}
									})
								}
							}

							$("#search").click(function() {

									active.reload();
							});

							//监听添加按钮
							$("#jia").click(function() {
								layer.open({
									type : 1,
									title : '添加',
									content : $("#addDiv"),
									area : [ '550px', '600px' ]
								})
							})
							//添加数据
							$("#addBtn").click(
									function() {
										$.post('/X-admin/save', $("#addForm")
												.serialize(), function(res) {
											if (res > 0) {

												layer.closeAll();
												active.reload();
												layer.msg("添加成功！");
											}
										}, "json")
									})

							//监听行工具事件
							table.on('tool(tfil)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
								var data = obj.data //获得当前行数据
								, layEvent = obj.event; //获得 lay-event 对应的值
								if (layEvent === 'detail') {

									alert($("#l").val());
									form.val("selectForm", data);
									layer.open({
										type : 1,
										title : '查看',
										content : $("#selectDiv"),
										area : [ '550px', '600px' ]
									})
								} else if (layEvent === 'del') {
									var id = data.id;
									$.ajax({
										url : "/X-admin/delete",
										dataType : "json",
										type : "delete",
										data : {
											"id" : id
										},
										success : function(data) {
											active.reload();
										},
										error : function() {

										}
									});
								} else if (layEvent === 'edit') {
									form.val("updateForm", data);
									layer.open({
										type : 1,
										title : '修改',
										content : $("#updateDiv"),
										area : [ '550px', '600px' ]
									})
								}
							});
							$("#updateBtn").click(function() {

								var data = $("#updateForm").serialize();

								alert(data);
								$.ajax({
									url : "/X-admin/save",
									dataType : "json",
									type : "put",
									data : $("#updateForm").serialize(),
									success : function(data) {
										active.reload();
										layer.closeAll();
									},
									error : function() {
									}
								});
							})
						})
	</script>

	<!--      查看详情 -->
	<div id="selectDiv" style="display: none; margin-left: 10px;">
		<form id="selectForm" class="layui-form" lay-filter="selectForm"
			action="" onsubmit="return false;">
			<div class="layui-form-item">
				<label class="layui-form-mid">卡号：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="cardno" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-mid">姓名：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="name" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-mid">状态：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="status" />
				</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-mid">所属：</label>
				<div class="layui-input-inline" style="width: 350px;">

					<input class="layui-input" name="department" />

				</div>
			</div>

		</form>
	</div>
	<!--   添加 -->
	<div id="addDiv" style="display: none; margin-left: 10px;">
		<form id="addForm" class="layui-form" action="" method="post"
			onsubmit="return false;">
			<div class="layui-form-item">
				<label class="layui-form-mid">卡号：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="cardno" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-mid">姓名：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="name" />
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<button id="addBtn" class="layui-btn" lay-filter="test">添加</button>
			</div>
		</form>
	</div>
	<!-- 修改 -->
	<div id="updateDiv" style="display: none; margin-left: 10px;">
		<form id="updateForm" class="layui-form" lay-filter="updateForm"
			onsubmit="return false;">
			<div class="layui-form-item" style="display: none">
				<label class="layui-form-mid"></label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="id" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-mid">卡号：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="cardno" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-mid">姓名：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="name" />
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<button id="updateBtn">修改</button>
			</div>
		</form>
	</div>
</body>

</html>